<!-- ----------------------------
--  @author: 野狼上校           --
--  @create: 2024-07-18 18:36  --
--  @version: 1.0              --
-------------------------------->
<!--  -->
<template>
  <el-breadcrumb :separator-icon="DArrowRight" style='font: normal bold 1.1rem "Fira Sans", serif;'>
    <el-breadcrumb-item v-for="(item, index) in items" :key="index">{{ item }}</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider/>

  <!-- 列表数据 -->
  <el-row :gutter="20" class="my-table">
    <el-col :span="4">
      {{deviceGuid}}的阈值详情列表
    </el-col>
    <el-col :span="16">
    </el-col>
    <el-col :span="4">
    </el-col>
  </el-row>

  <!--  表格数据  -->
  <el-table :data="thresholds" stripe border style="width: 100%">
    <el-table-column prop="deviceGuid" label="设备Id" width="120" align="center"/>
    <el-table-column prop="username" label="用户名称" width="120" align="center"/>
    <el-table-column prop="xThreshold" label="x轴阈值" width="120" align="center"/>
    <el-table-column prop="yThreshold" label="y轴阈值" width="120" align="center"/>
    <el-table-column prop="zThreshold" label="z轴阈值" width="120" align="center"/>
    <el-table-column prop="createTime" label="创建时间" width="150" align="center"/>
  </el-table>

  <!--  分页插件  -->
  <el-pagination
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      class="el-pagination"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

</template>

<script setup lang="ts">

import {useRoute} from "vue-router";
import {DArrowRight} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {SUCCESS} from "@/utils/constants.ts";
import {RespResult} from "@/api";
import {getThresholdsDescByPage} from "@/api/crash/threshold.ts";

const breadcrumb: any = useRoute().meta.title;
const items: string[] = breadcrumb.split(",");

/*表格数据*/
const thresholds = ref([]);

/*分页条件*/
const pagination = ref({
  pageNum: 1,
  pageSize: 10
})
/*总记录数*/
const total = ref(0);
/*改变每页显示数量*/
const handleSizeChange = (pageSize: number) => {
  pagination.value.pageNum = 1;
  pagination.value.pageSize = pageSize
  getThresholds(deviceGuid.value);
}
/*改变页码*/
const handleCurrentChange = (pageNum: number) => {
  pagination.value.pageNum = pageNum;
  getThresholds(deviceGuid.value);
}

const deviceGuid = ref()

onMounted(() => {
  deviceGuid.value = useRoute().query.deviceGuid;
  // 请求
  getThresholds(deviceGuid.value);
})

const getThresholds = (deviceGuid: string) => {
  // 发送请求
  getThresholdsDescByPage({
    pageSize: pagination.value.pageSize,
    pageNum: pagination.value.pageNum,
    deviceGuid: deviceGuid
  }).then(
      (response: RespResult) => {
        if (response.code === SUCCESS) {
          const jsonObject = JSON.parse(response.data);
          thresholds.value = jsonObject.records;
          total.value = jsonObject.total;
        } else {
          ElMessage({
            message: "获取数据失败",
            type: 'error'
          })
        }
      }
  )
}
</script>

<style scoped>
.my-table {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
  border: 1px solid #DDDDDD;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

</style>